<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="build/css/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/my-style.css">
</head>

<body>
<div class="kit-doc"> 
  
  <!--表格搜索框组-->
  <div class="layui-form-item layui-formgroup layui-tab-card"> 
    <!-- input输入框 -->
    <div class="layui-inline">
      <label class="layui-form-label">用户名：</label>
      <div class="layui-input-inline">
        <input name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input" type="tel">
      </div>
    </div>
    <!-- 下拉框-->
    <div class="layui-inline">
      <form class="layui-form " action="">
        <label class="layui-form-label">选择模块：</label>
        <div class="layui-input-inline">
          <select name="interest" lay-filter="aihao">
            <option value=""></option>
            <option value="0">模块一</option>
            <option value="1" selected="">模块二</option>
            <option value="2">模块三</option>
          </select>
        </div>
      </form>
    </div>
    <!-- 时间 -->
    <div class="layui-inline">
      <label class="layui-form-label">验证日期</label>
   
      <div class="layui-input-inline">
        <input class="layui-input" id="test6" placeholder=" 时间段 " type="text">
      </div>
    </div>
 
    <!-- 按钮 -->
    <button class="layui-btn ">搜索</button>
  </div>
  
  <div class="layui-card layui-card-body">

  
  	  <table class="layui-table xuhao-table">
    <thead>
      <tr>
        <th width="20px">&nbsp;</th>
        <th>日志内容</th>
        <th>日志类型</th>
        <th>操作人</th>
        <th>操作IP</th>
        <th>操作时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>修改名称为京口丹阳扬中三交点A号的界桩信息</td>
        <td>地名标志管理</td>
        <td>admin</td>
        <td>192.168.7.170</td>
        <td>2016-11-29</td>
      </tr>
      <tr>
        <td>2</td>
        <td>修改名称为四牌楼菜场的地名标志信息</td>
        <td>地名标志管理</td>
        <td>admin</td>
        <td>192.168.7.170</td>
        <td>2016-11-29</td>
      </tr>
      <tr>
        <td>3</td>
        <td>修改名称为四牌楼街道-镇江市公安局京口分局四牌楼派出所的地名标志信息</td>
        <td>地名标志管理</td>
        <td>admin</td>
        <td>192.168.7.170</td>
        <td>2016-11-29</td>
      </tr>
      <tr>
        <td>4</td>
        <td>修改名称为京口丹阳扬中三交点A号的界桩信息</td>
        <td>地名标志管理</td>
        <td>admin</td>
        <td >192.168.7.170</td>
        <td>2016-11-29</td>
      </tr>
    </tbody>
  </table>
  
  <div id="layui-table-page">
    <div class="layui-box layui-laypage layui-laypage-default"><span class="layui-laypage-count">共 100 条</span><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a><a href="javascript:;" data-page="4">4</a><a href="javascript:;" data-page="5">5</a><span class="layui-laypage-spr">…</span><a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a><a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>
	  </div>
  </div>
  
  </div>

</div>
<!-- 弹框content -->
<div id="modal-content1" style="display: none; padding:20px;">
	<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>



<script src="./plugins/layui/layui.js"></script> 
<!-- 表单 -->
<script>
        layui.use(['form', 'layedit', 'laydate'], function() {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

        });
</script>
<!--弹框-->
<script>
	
		var message;
        layui.config({
            base: 'build/js/'
        }).use(['app', 'message'], function() {
            var $ = layui.jquery,
                layer = layui.layer;
            //将message设置为全局以便子页面调用
        
            $('#modal1').on('click', function() {
                layer.open({
                    title: "内容添加",
                    type: 1,
                    content:$("#modal-content1"),
                    area: ['40%', '60%'],
                    shadeClose: true,
                    end: function () {
                        //关闭窗口时清空表单内容
                        $("#modal-content1").find('input[type=text],select,textarea,input[type=hidden]').each(function () {
                            $(this).val('');
                        });

                    }
                });
            });
        });
    </script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', minWidth: 150}
      ,{field:'experience', width:80, title: '积分', sort: true}
      ,{field:'score', width:80, title: '评分', sort: true}
      ,{field:'classify', width:80, title: '职业'}
      ,{field:'wealth', width:135, title: '财富', sort: true}
    ]]
    ,page: true
  });
});
</script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //日期时间选择器
  laydate.render({
    elem: '#test5'
    ,type: 'datetime'
  });
  
  //日期范围
  laydate.render({
    elem: '#test6'
    ,range: true
  });
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
  //表单初始赋值
  form.val('example', {
    "username": "贤心" // "name": "value"
    ,"password": "123456"
    ,"interest": 1
    ,"like[write]": true //复选框选中状态
    ,"close": true //开关状态
    ,"sex": "女"
    ,"desc": "我爱 layui"
  })
  
  
});
</script>






</body>
</html>